<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fregments :: head(~{::title})">
    <title>影院信息管理</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Main CSS-->
    <link rel="stylesheet" type="text/css" href="../../static/css/main.css">
    <!-- Font-icon css-->
    <link rel="stylesheet" type="text/css" href="../../static/css/bootstrap-icons.min.css">
    <link rel="stylesheet" type="text/css" href="../../static/css/style.css">
</head>

<body class="app sidebar-mini">
<!-- Navbar-->
<header th:replace="_fregments :: header" class="app-header"><a class="app-header__logo" href="index.html">挚夕影院</a>
    <!-- Sidebar toggle button--><a class="app-sidebar__toggle" href="#" data-toggle="sidebar"
                                    aria-label="Hide Sidebar"></a>
    <!-- Navbar Right Menu-->
    <ul class="app-nav">
        <li class="app-search">
            <input class="app-search__input" type="search" placeholder="Search">
            <button class="app-search__button"><i class="bi bi-search"></i></button>
        </li>

        <!-- User Menu-->
        <li class="dropdown"><a class="app-nav__item" href="#" data-bs-toggle="dropdown" aria-label="Open Profile Menu"><i
                class="bi bi-person fs-4"></i></a>
            <ul class="dropdown-menu settings-menu dropdown-menu-right">
                <li><a class="dropdown-item" href="page-user.html"><i class="bi bi-gear me-2 fs-5"></i> 设置</a></li>
                <li><a class="dropdown-item" href="page-login.html"><i class="bi bi-box-arrow-right me-2 fs-5"></i> 登出</a>
                </li>
            </ul>
        </li>
    </ul>
</header>
<!-- Sidebar menu-->
<div class="app-sidebar__overlay" data-toggle="sidebar"></div>
<aside th:replace="_fregments :: menu(1, 1)" class="app-sidebar">
    <div class="app-sidebar__user"><img class="app-sidebar__user-avatar" src="../../static/images/me.jpg"
                                        alt="User Image">
        <div>
            <p class="app-sidebar__user-name">Dylan</p>
            <p class="app-sidebar__user-designation">Backend Developer</p>
        </div>
    </div>
    <ul class="app-menu">
        <!-- 仪表盘 -->
        <li>
            <a class="app-menu__item" href="../index.html">
                <i class="app-menu__icon bi bi-speedometer"></i>
                <span class="app-menu__label">仪表盘</span>
            </a>
        </li>
        <!-- 影院管理 -->
        <li class="treeview is-expanded">
            <a class="app-menu__item active" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-house"></i>
                <span class="app-menu__label">影院管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item active" href="../cinema/info">
                        <i class="app-menu__item bi  bi-stars"></i>
                        影院信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../cinema/cinema_area.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        影院区域管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../cinema/cinema_brand.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        影院品牌管理
                    </a>
                </li>
            </ul>
        </li>
        <!-- 电影管理 -->
        <li class="treeview">
            <a class="app-menu__item" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-camera-reels"></i>
                <span class="app-menu__label">电影管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item" href="../movie/movie_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../movie/movie_comment.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影评论管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../movie/movie_age.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影年代管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../movie/movie_area.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影区域管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../movie/movie_type.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影类别管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../movie/movie_runtime.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        电影播放时段管理
                    </a>
                </li>
            </ul>
        </li>
        <!-- 影厅管理 -->
        <li class="treeview">
            <a class="app-menu__item" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-bank"></i>
                <span class="app-menu__label">影厅管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item" href="../hall/hall_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        影厅信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../hall/hall_type.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        影厅类别管理
                    </a>
                </li>
            </ul>
        </li>
        <!-- 场次管理 -->
        <li class="treeview">
            <a class="app-menu__item" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-bell"></i>
                <span class="app-menu__label">场次管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item" href="../session/session_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        场次信息管理
                    </a>
                </li>
            </ul>
        </li>
        <!-- 演员管理 -->
        <li class="treeview">
            <a class="app-menu__item" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-people"></i>
                <span class="app-menu__label">演员管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item" href="../actor/actor_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        演员信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../actor/actor_role.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        演员角色管理
                    </a>
                </li>
            </ul>
        </li>
        <!-- 用户管理 -->
        <li class="treeview">
            <a class="app-menu__item" href="#" data-toggle="treeview">
                <i class="app-menu__icon bi bi-person"></i>
                <span class="app-menu__label">用户管理</span>
                <i class="treeview-indicator bi bi-chevron-right"></i>
            </a>
            <ul class="treeview-menu">
                <li>
                    <a class="treeview-item" href="../user/user_info.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        用户信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../user/user_order.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        订单信息管理
                    </a>
                </li>
                <li>
                    <a class="treeview-item" href="../user/user_role.html">
                        <i class="app-menu__item bi  bi-stars"></i>
                        用户角色管理
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</aside>

<main class="app-content">
    <!-- Modal 开始-->
    <div class="modal fade" id="cinemaModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">添加影院</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3 row">
                        <label for="modalInputCinemaName" class="col-sm-3 col-form-label"><span
                                style="color: red;">*&nbsp;</span>影院名称</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="modalInputCinemaName">
                            <!--影院id-->
                            <input type="hidden" class="form-control" id="modalInputCinemaId">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="modalSelectCinemaBrand" class="col-sm-3 col-form-label"><span
                                style="color: red;">*&nbsp;</span>影院品牌</label>
                        <div class="col-sm-9">
                            <select id="modalSelectCinemaBrand" class="form-select" aria-label="Default select example">
                                <option th:each="brand : ${cinemaBrands}" th:value="${brand.id}"
                                        th:text="${brand.name}" value="1">万达影院
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="modalSelectCinemaArea" class="col-sm-3 col-form-label"><span
                                style="color: red;">*&nbsp;</span>影院区域</label>
                        <div class="col-sm-9">
                            <select id="modalSelectCinemaArea" class="form-select">
                                <option th:each="area : ${cinemaAreas}" th:value="${area.id}" th:text="${area.name}">
                                    鸠江区
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="modalInputCinemaAddress" class="col-sm-3 col-form-label"><span
                                style="color: red;">*&nbsp;</span>影院地址</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="modalInputCinemaAddress">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="modalSelectIsTicketChanged" class="col-sm-3 col-form-label"><span
                                style="color: red;">*&nbsp;</span>是否支持改签</label>
                        <div class="col-sm-9">
                            <select id="modalSelectIsTicketChanged" class="form-select"
                                    aria-label="Default select example">
                                <option value="0">不可改签</option>
                                <option value="1">可改签</option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="modalSelectIsRefunded" class="col-sm-3 col-form-label"><span
                                style="color: red;">*&nbsp;</span>是否支持退票</label>
                        <div class="col-sm-9">
                            <select id="modalSelectIsRefunded" class="form-select" aria-label="Default select example">

                                <option value="0">不可退票</option>
                                <option value="1">可退票</option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="modalSelectCinemaAdmin" class="col-sm-3 col-form-label">&nbsp;&nbsp;管理员</label>
                        <div class="col-sm-9">
                            <select class="form-select" aria-label="Default select example" id="modalSelectCinemaAdmin">
                                <option th:each="user : ${users}" th:value="${user.id}" th:text="${user.username}">
                                    张三
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="modalInputCinemaDate" class="col-sm-3 col-form-label"><span
                                style="color: red;">*&nbsp;</span>入住日期</label>
                        <div class="col-sm-9">
                            <input type="date" class="form-control" id="modalInputCinemaDate">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="modalInputCinemaPicture"
                               class="col-sm-3 col-form-label">&nbsp;&nbsp;影院图片</label>
                        <div class="col-sm-9">
                            <input type="file" class="form-control" id="modalInputCinemaPicture" multiple>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" id="saveBtn" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div><!-- Modal 结束-->

    <div class="app-title">
        <div>
            <h1><i class="bi bi-speedometer"></i> 影院信息管理</h1>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="bi bi-house-door fs-6"></i></li>
            <li class="breadcrumb-item"><a th:href="@{/cinema/info}">影院管理</a></li>
            <li class="breadcrumb-item">影院信息管理</li>
        </ul>
    </div>
    <!-- 查询条件 -->
    <div class="row" style="margin-bottom: 20px;">
        <div class="col-md-3">
            <select id="selectCinemaBrand" class="form-select" aria-label="Default select example">
                <option value="0" selected>请选择影院品牌</option>
                <option th:each="brand : ${cinemaBrands}" th:value="${brand.id}" th:text="${brand.name}">万达影院
                </option>
            </select>
        </div>
        <div class="col-md-3">
            <select id="selectCinemaArea" class="form-select">
                <option value="0" selected>请选择影院区域</option>
                <option th:each="area : ${cinemaAreas}" th:value="${area.id}" th:text="${area.name}">鸠江区</option>
            </select>
        </div>
        <div class="col-md-3">
            <button type="button" id="searchBtn" class="btn btn-success">搜索</button>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                    data-bs-target="#cinemaModal" data-id="0">添加影院
            </button>
            <button type="button" id="deleteAllBtn" class="btn btn-danger">批量删除</button>
        </div>
    </div>
    <div class="row" style="margin-bottom: 20px;">
        <div class="col-md-3">
            <select id="selectIsTicketChanged" class="form-select" aria-label="Default select example">
                <option value="-1" selected>请选择是否可支持改签</option>
                <option value="0">不可改签</option>
                <option value="1">可改签</option>
            </select>
        </div>
        <div class="col-md-3">
            <select id="selectIsRefunded" class="form-select" aria-label="Default select example">
                <option value="-1" selected>请选择是否可支持退票</option>
                <option value="0">不可退票</option>
                <option value="1">可退票</option>
            </select>
        </div>
    </div>

    <div class="row" style="margin-bottom: 20px;">
        <div class="col-md-3">
            <input type="text" id="inputCinemaName" class="form-control" placeholder="请输入影院名称">
        </div>
        <div class="col-md-3">
            <input type="text" id="inputCinemaAddress" class="form-control" placeholder="请输入影院地址">
        </div>
    </div>
    <div id="table-container">
        <div th:fragment="cinemaList">
            <!--表格-->
            <div class="row">
                <div>
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th scope="col">
                                <input class="form-check-input" type="checkbox" value="" id="checkAll">
                            </th>
                            <th scope="col">
                                影院名称
                            </th>
                            <th scope="col">
                                影院品牌
                            </th>
                            <th scope="col">
                                是否改签
                            </th>
                            <th scope="col">
                                是否退款
                            </th>
                            <th scope="col">
                                市
                            </th>
                            <th scope="col">
                                省
                            </th>
                            <th scope="col">
                                地址
                            </th>
                            <th scope="col">
                                管理员
                            </th>
                            <th scope="col">
                                入住日期
                            </th>
                            <th scope="col">
                                操作
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="cinema : ${cinemaPage.records}">
                            <th scope="row">
                                <input class="form-check-input deleteCheck" type="checkbox" th:value="${cinema.id}">
                            </th>
                            <td th:text="${cinema.name}">万达影城（经开万达广场店</td>
                            <td th:text="${cinema.cinemaBrand.name}">万达影城</td>
                            <td>
                                <div class="form-check form-switch">
                                    <input th:checked="${cinema.isTicketChanged}"
                                           class="form-check-input ticketChangedSwitch"
                                           type="checkbox" role="switch"
                                           th:data-id="${cinema.id}">
                                </div>
                            </td>
                            <td>
                                <div class="form-check form-switch">
                                    <input th:checked="${cinema.isRefunded}"
                                           class="form-check-input refundChangedSwitch"
                                           type="checkbox" role="switch"
                                           th:data-id="${cinema.id}">
                                </div>
                            </td>
                            <td th:text="${cinema.cinemaArea.city}">大连市</td>
                            <td th:text="${cinema.cinemaArea.province}">金州区</td>
                            <td th:text="${cinema.address}">金州区经济技术开发区辽河西路117号万达广场四楼</td>
                            <td th:text="${cinema.adminName}">dylan</td>
                            <td th:text="${#dates.format(cinema.entryDate, 'yyyy-MM-dd')}">2020-02-02</td>
                            <td>
                                <button type="button" class="btn btn-primary updateBtn" data-bs-toggle="modal"
                                        data-bs-target="#cinemaModal" th:data-id="${cinema.id}">
                                    <i class="bi bi-pencil-square"></i>
                                </button>
                                <button type="button" class="btn btn-danger deleteBtn" th:data-id="${cinema.id}">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </td>
                        </tr>
                        </tbody>

                    </table>
                    <div th:if="${cinemaPage.getPages() < 1}" class="alert alert-light text-center" role="alert">
                        暂无数据
                    </div>
                </div>
            </div>
            <!--分页条-->
            <div class="row">
                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-center">
                        <li class="page-item" th:classappend="${!cinemaPage.hasPrevious()} ? 'disabled'">
                            <a th:data-pageNo="${cinemaPage.current - 1}" class="page-link">上一页</a>
                        </li>
                        <!-- 最多显示五个页码按钮-->
                        <!-- 小于等于5页，全部显示-->
                        <th:block th:if="${cinemaPage.getPages() <= 5}">
                            <!--考虑一页都没有的情况-->
                            <th:block th:if="${cinemaPage.getPages() > 0}">
                                <li th:each="i : ${#numbers.sequence(1,cinemaPage.getPages())}" class="page-item">
                                    <a class="page-link" th:classappend="${i == cinemaPage.current} ? 'active'"
                                       th:data-pageNo="${i}" th:text="${i}"></a>
                                </li>
                            </th:block>
                        </th:block>
                        <!-- 大于5页，分情况-->
                        <th:block th:if="${cinemaPage.getPages() > 5}">
                            <!-- 后面有两页及以上-->
                            <th:block th:if="${cinemaPage.getPages() >= cinemaPage.current + 2}">
                                <!-- no < 3 不居中-->
                                <th:block th:if="${cinemaPage.current < 3}">
                                    <li th:each="i : ${#numbers.sequence(1, 5)}" class="page-item">
                                        <a class="page-link" th:classappend="${i == cinemaPage.current} ? 'active'"
                                           th:data-pageNo="${i}" th:text="${i}"></a>
                                    </li>
                                </th:block>
                                <!-- 大于2可居中-->
                                <th:block th:if="${cinemaPage.current >= 3}">
                                    <li th:each="i : ${#numbers.sequence(cinemaPage.current - 2, cinemaPage.current + 2)}"
                                        class="page-item" th:classappend="${cinemaPage.current == i} ? 'active'">
                                        <a class="page-link"
                                           th:classappend="${i == cinemaPage.current} ? 'active'"
                                           th:data-pageNo="${i}" th:text="${i}"></a>
                                    </li>
                                </th:block>
                            </th:block>
                            <!-- 当前页码后面不足两页-->
                            <th:block th:if="${cinemaPage.getPages() < cinemaPage.current + 2}">
                                <li th:each="i : ${#numbers.sequence(cinemaPage.getPages() - 4, cinemaPage.getPages())}"
                                    class="page-item" th:classappend="${cinemaPage.current == i} ? 'active'">
                                    <a class="page-link"
                                       th:classappend="${i == cinemaPage.current} ? 'active'"
                                       th:data-pageNo="${i}" th:text="${i}"></a>
                                </li>
                            </th:block>
                        </th:block>
                        <li class="page-item" th:classappend="${!cinemaPage.hasNext()} ? 'disabled'">
                            <a th:data-pageNo="${cinemaPage.current + 1}" class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

    </div>

</main>

<!--/*/<th:block th:replace="_fregments::script">/*/-->
<script src="../../static/js/jquery-3.7.0.min.js"></script>
<script src="../../static/js/bootstrap.min.js"></script>
<script src="../../static/js/main.js"></script>
<!--/*/</th:block>/*/-->

<script type="text/javascript">
    function page(pageNo) {
        //搜索参数
        var brandId = $("#selectCinemaBrand").val()
        if (brandId == 0) { //未选择
            brandId = null
        }
        var areaId = $("#selectCinemaArea").val()
        if (areaId == 0) {
            areaId = null
        }
        var isTicketChanged = $("#selectIsTicketChanged").val()
        if (isTicketChanged == -1) {
            isTicketChanged = null
        }
        var isRefunded = $("#selectIsRefunded").val()
        if (isRefunded == -1) {
            isRefunded = null
        }
        var name = $.trim($("#inputCinemaName").val())
        var address = $.trim($("#inputCinemaAddress").val())
        //加载数据
        $("#table-container").load(/*[[@{/cinema/info/search}]]*/"/cinema/info/search", {
            brandId: brandId,
            areaId: areaId,
            isTicketChanged: isTicketChanged,
            isRefunded: isRefunded,
            name: name,
            address: address,
            pageNo: pageNo,
            pageSize: 10
        });
    }


    <!-- 清空模态框输入 -->
    function clearModal() {
        $("#modalInputCinemaId").val('')
        $("#modalInputCinemaName").val('')
        $("#modalSelectCinemaBrand").val($("#modalSelectCinemaBrand").children(0).val())
        $("#modalSelectCinemaArea").val($("#modalSelectCinemaArea").children(0).val())
        $("#modalInputCinemaAddress").val('')
        $("#modalSelectCinemaAdmin").val($("#modalSelectCinemaAdmin").children(0).val())
        $("#modalSelectIsTicketChanged").val(0)
        $("#modalSelectIsRefunded").val(0)
        $("#modalInputCinemaDate").val('')
        $("#modalInputCinemaPicture").val('')
    }

    $(function () {
        //全选
        $("#table-container").on('click', '#checkAll', function () {
            $(".deleteCheck").prop("checked", this.checked);
        });
        $("#table-container").on('click', '.deleteCheck', function () {
            $("#checkAll").prop("checked",
                $(".deleteCheck").length == $(".deleteCheck:checked").length);
        });

        const cinemaModal = document.getElementById('cinemaModal')
        cinemaModal.addEventListener('show.bs.modal', event => {
            // Button that triggered the modal
            const button = event.relatedTarget
            // Extract info from data-bs-* attributes
            const id = button.getAttribute('data-id')
            // If necessary, you could initiate an AJAX request here
            // and then do the updating in a callback.
            //
            const modalTitle = cinemaModal.querySelector('.modal-title')
            if (id != '0') { //修改
                modalTitle.textContent = '修改影院';
                //查询影院信息
                $.ajax({
                    url: '[[@{/cinema/info/}]]' + id,
                    type: 'get',
                    success: function (response) {
                        if (response.status == 'success') {
                            var cinema = response.data;
                            $("#modalInputCinemaId").val(cinema.id)
                            $("#modalInputCinemaName").val(cinema.name)
                            $("#modalSelectCinemaBrand").val(cinema.brandId)
                            $("#modalSelectCinemaArea").val(cinema.areaId)
                            $("#modalInputCinemaAddress").val(cinema.address)
                            $("#modalSelectCinemaAdmin").val(cinema.userId)
                            $("#modalSelectIsTicketChanged").val(cinema.isTicketChanged)
                            $("#modalSelectIsRefunded").val(cinema.isRefunded)
                            $("#modalInputCinemaDate").val(cinema.entryDate)
                        }
                    }
                })
            } else {
                modalTitle.textContent = '添加影院';
                //清空模态框
                clearModal();
            }
            // Update the modal's content.

            // const modalBodyInput = cinemaModal.querySelector('.modal-body input')

            // modalTitle.textContent = `New message to ${id}`
            // modalBodyInput.value = id
        })
        //保存
        $("#saveBtn").click(function () {
            //收集参数
            var id = $("#modalInputCinemaId").val();
            var cinemaName = $.trim($("#modalInputCinemaName").val())
            var brandId = $("#modalSelectCinemaBrand").val()
            var areaId = $("#modalSelectCinemaArea").val()
            var address = $.trim($("#modalInputCinemaAddress").val())
            var userId = $("#modalSelectCinemaAdmin").val()
            var isTicketChanged = $("#modalSelectIsTicketChanged").val()
            var isRefunded = $("#modalSelectIsRefunded").val()
            var entryDate = $("#modalInputCinemaDate").val()
            var cinemaPictures = $("#modalInputCinemaPicture")[0].files
            // console.log(cinemaPictures)
            // console.log(entryDate)
            var formData = new FormData()
            //文件
            for (let i = 0; i < cinemaPictures.length; i++) {
                formData.append("file", cinemaPictures.item(i)) // 向相同键添加可叠加文件
            }
            //文本
            formData.append('id', id);
            formData.append('name', cinemaName)
            formData.append('brandId', brandId)
            formData.append('areaId', areaId)
            formData.append('address', address)
            formData.append('userId', userId)
            formData.append('isTicketChanged', isTicketChanged)
            formData.append('isRefunded', isRefunded)
            formData.append('entryDate', entryDate)
            $.ajax({
                url: '[[@{/cinema/info}]]',
                type: id ? 'put' : 'post',
                data: formData,
                processData: false, // processData和contentType必须是false
                contentType: false,
                async: true
            }).then(res => {
                if (res.status == 'success') {
                    toastr.success(res.data, 'success');
                    page(1)
                    $("#cinemaModal").modal('hide')
                } else {
                    console.log(res)
                    toastr.warning(res.data.errorMessage, 'warning');
                }
            })
        })

        //删除
        $("#table-container").on('click', '.deleteBtn', function () {
            var id = $(this).data('id')
            $.ajax({
                url: '[[@{/cinema/info/}]]' + id,
                type: 'delete',
                success: function (response) {
                    if (response.status == 'success') {
                        toastr.success(response.data, 'success');
                        page(1)
                    } else {
                        toastr.warning(response.data.errorMessage, 'warning');
                    }
                },
                error: function (response) {
                    toastr.error(response.responseText, 'error');
                }
            })
        })
        //搜索
        $("#searchBtn").click(function () {
            //第一页
            page(1)
        })
        //分页条按钮点击事件
        $("#table-container").on('click', '.page-link', function () {
            var pageNo = $(this).data('pageno')
            page(pageNo)
        })
        //批量删除
        $("#deleteAllBtn").click(function () {
            var areaIds = $(".deleteCheck:checked");
            if(areaIds.length == 0){
                swal('请勾选要删除的影院')
                return
            }
            var ids = ''
            $.each(areaIds, function (){
                ids += 'id='  + this.value + "&"
            })
            ids = ids.substring(0, ids.length - 1)
            swal("确认删除选中吗?", {
                buttons: ["取消", "确认"],
            }).then((value) => {
                // 点击取消 value=null
                // 点击确认 value=true
                if (value) {
                    $.ajax({
                        url: '[[@{/cinema/info}]]',
                        type: 'delete',
                        data: ids,
                        success: function (response) {
                            if(response.status == 'success'){
                                //加载表格数据
                                page(1)
                                swal(response.data);
                            }else{
                                swal(response.data.errorMessage)
                            }
                        },
                        error: function (response) {
                            swal(response.responseText)
                        }
                    })
                }
            });
        })
        //更改是否可以改签
        $("#table-container").on('click', '.ticketChangedSwitch', function (){
            var id = $(this).data('id')
            var isTicketChanged = $(this).prop('checked')
            if(isTicketChanged){
                isTicketChanged = 1
            }else{
                isTicketChanged = 0
            }
            $.ajax({
                url: '[[@{/cinema/info/change}]]',
                type: 'put',
                data: {
                    id: id,
                    isTicketChanged: isTicketChanged
                },
                success: function (response) {
                    if (response.status == 'success') {
                        toastr.success(response.data, 'success')
                    } else {
                        toastr.warning(response.data.errorMessage, 'warning')
                    }
                },
                error: function (response) {
                    toastr.error(response.responseText, 'error')
                }
            })
        })
        //更改是否可以退款
        $("#table-container").on('click', '.refundChangedSwitch', function (){
            var id = $(this).data('id')
            var isRefunded = $(this).prop('checked')
            if(isRefunded){
                isRefunded = 1
            }else{
                isRefunded = 0
            }
            $.ajax({
                url: '[[@{/cinema/info/change}]]',
                type: 'put',
                data: {
                    id: id,
                    isRefunded: isRefunded
                },
                success: function (response) {
                    if (response.status == 'success') {
                        toastr.success(response.data, 'success')
                    } else {
                        toastr.warning(response.data.errorMessage, 'warning')
                    }
                },
                error: function (response) {
                    toastr.error(response.responseText, 'error')
                }
            })
        })
    });

</script>
</body>

</html>